<style scoped>
    .categ-articles-item {
        display: block;
        width: 100%;
        position: relative;
        padding-top: 10px;
    }

    .categ-articles-item > img {
        width: 90%;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }

    .categ-articles-item > p {
        position: absolute;
        padding-left: 10%;
        display: block;
        z-index: 10;
        width: 80%;
        margin: 0 auto;
        bottom: 10px;
        color: white;
        word-break: break-all;
    }

    .categ-articles-item > img[lazy=loading] {
      width: 40px;
      height: 40px;
      padding: 80px;
    }

</style>

<template>
    <div class="categ-articles" >
        <a class="categ-articles-item" v-for="item in items" v-link="{name: 'article', query: item}">
            <img v-lazy="item.src" />
            <p>{{ item.title }}</p>
        </a>
    </div>
</template>

<script>
    import articleService from 'services/article'
    const temp_items = [
        { article: 1, src: '/static/1.jpeg', title: '第一期 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' },
        { article: 2, src: '/static/2.jpeg', title: '第二期 | XXXXXXXX' },
        { article: 4, src: '/static/2.jpeg', title: '第四期 | XXXXXXXX' },
        { article: 4, src: '/static/2.jpeg', title: '第四期 | XXXXXXXX' },
        { article: 4, src: '/static/2.jpeg', title: '第四期 | XXXXXXXX' },
        { article: 4, src: '/static/2.jpeg', title: '第四期 | XXXXXXXX' },
        { article: 4, src: '/static/2.jpeg', title: '第四期 | XXXXXXXX' },
        { article: 3, src: '/static/3.jpeg', title: '第三期 | XXXXXXXX' },
    ];

    export default {
        data: () => ({ items: [] }),
        route: {
            data: ({to}) => {
                return articleService
                    .fetchArticlesByCateg(to.params.categ_id)
                    .then(({data}) => ({ items: data }), () => ({ items: temp_items}))
            }
        }
    }
</script>
